Vue组件

组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。就像是python中封装一个类，在其他类中可以继承和调用类中的属性和方法。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

组件的基本使用

全局组件的使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js">script>
    <title>Documenttitle>
head>
<body>

    <div id="app"> 
         
        <zujian_all>zujian_all>   
    div>

 <script>
    // 全局组件通过 Vue.component注册
    Vue.component(
        'zujian_all',
        {   // template指定组件显示的html内容
            template:'全局组件
',
        }
    )

    new Vue({
        el: '#app',
    })
   script>
body>
html>

Vue.component()方法中参数说明

第一个参数指定组件名

第二参数以 {} 形式传递，在里面指定组件的属性，template指定组件的要加载的内容

局部组件指定


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js">script>
    <title>Documenttitle>
head>
<body>

    <div id="app">
        <zujian_all>zujian_all>
    div>

 <script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'局部组件1
',
     };
    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'全局组件    
',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a
            }
           }
    )

    new Vue({
        el: '#app',
    })

    script>
body>
html>

多个局部组件的使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js">script>
    <title>Documenttitle>
head>
<body>

    <div id="app">
        <zujian_all>zujian_all>
    div>

 <script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'局部组件1
',
     };
     var zujian_b={
        template:'局部组件2
',
     };
    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'全局组件      
',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a,
                zujian_b
            }
           }
    )

    new Vue({
        el: '#app',
    })
    script>
body>
html>

组间的关系
- 组件中可以通过components嵌套另外的组件,比如可以在组件zujian_a中嵌套组件zujian_b


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js">script>
    <title>Documenttitle>
head>
<body>

    <div id="app">
        <zujian_all>zujian_all>
    div>

 <script>
    // 局部组件注册,定义局部组件
    var zujian_b={
        template:'局部组件2
',
     };

    var zujian_a={
        template:'局部组件1    
',
        components:{
            zujian_b
        }
     };

    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'全局组件      
',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a
            }
           }
    )
    new Vue({
        el: '#app',
    })

    script>
body>
html>

注意:

如果要进行组件嵌套，则必须先讲嵌套的组件定义出来，否则不生效，比如在组件zujian_a中嵌套zujian_b则必须先将zujian_b定义出来